import { CommonModule } from "@angular/common";
import { HttpClient } from "@angular/common/http";
import { Component, type Signal, inject, signal } from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { interval, switchMap } from "rxjs";

@Component({
  imports: [CommonModule],
  template: "{{ counter() }}",
})
export class Ticker {
  /// to signal
  // dataSrc
  private counterObservable = interval(1000);

  // Get a `Signal` representing the `counterObservable`'s value.
  counter = toSignal(this.counterObservable, { initialValue: 0 });

  /// to rxjs
  // dataSrc
  private queryService: QueryService = inject(QueryService);

  query$ = toObservable(this.queryService.query);

  results$ = this.query$.pipe(
    switchMap((query) => this.http.get(`/search?q=${query}`)),
  );

  constructor(private http: HttpClient) { }
}

class QueryService {
  query = signal("");
}
